<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      class="headers"
      title="消息"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      fixed
    >
      <template #left>
        <van-icon name="user-circle-o" size="22" />
      </template>
      <template #right>
        <van-icon class-prefix="iconfont icon" name="adduser" size="22" />
      </template>
    </van-nav-bar>
    <!-- 好友popup -->
    <friend-operate v-if="operate_show"></friend-operate>
    <div class="page-body">
      <!-- messagegrid -->
      <message-grid></message-grid>
    </div>
    <!-- 页面底部 -->
    <my-footer></my-footer>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import footer from "@/components/Base/footer";
import messagegrid from "@/components/Base/Grid/message";
import friendoperate from "@/components/Base/Popup/friend-operate";
export default {
  data() {
    return {
      operate_show: false,
    };
  },
  methods: {
    ...mapMutations(["open_leftpopup", "close_leftpopup"]),
    onClickLeft() {
      this.open_leftpopup();
    },
    onClickRight() {
      this.operate_show = true;
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
  },
  components: {
    "my-footer": footer,
    "friend-operate": friendoperate,
    "message-grid": messagegrid,
  },
};
</script>

<style>
.van-nav-bar .iconfont {
  color: #1989fa;
}
</style>